import React from 'react';
import { useSoundStore } from '../stores/RootStore';
import { useTranslation } from 'react-i18next';

const SettingsPage: React.FC = () => {
  const soundStore = useSoundStore();
  const { i18n, t } = useTranslation();
  const [selectedLanguage, setSelectedLanguage] = React.useState<string>(i18n.language);

  // 处理语言切换
  const handleLanguageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const newLanguage = event.target.value;
    setSelectedLanguage(newLanguage);
    i18n.changeLanguage(newLanguage);
    // 保存到localStorage
    localStorage.setItem('appLanguage', newLanguage);
  };

  // 处理声音开关
  const toggleSound = () => {
    soundStore.toggleSound();
  };

  // 处理音量变化
  const handleVolumeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    soundStore.setVolume(parseInt(event.target.value, 10));
  };

  return (
    <div className="max-w-2xl mx-auto bg-white rounded-xl shadow-lg p-8">
      <h1 className="text-3xl font-bold text-center text-dark mb-8">{t('app.settings')}</h1>
      
      <div className="space-y-8">
        {/* 语言设置 */}
        <div className="p-6 bg-gray-50 rounded-lg">
          <h2 className="text-xl font-bold mb-4 text-dark">{t('app.language_settings')}</h2>
          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3">
            <label className="text-gray-700 font-medium w-full sm:w-24">{t('app.language')}:</label>
            <select
              value={selectedLanguage}
              onChange={handleLanguageChange}
              className="flex-1 appearance-none bg-white border border-gray-300 rounded-md py-2 px-4 pr-8 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"
            >
              <option value="en">English</option>
              <option value="zh">中文</option>
            </select>
          </div>
        </div>

        {/* 声音设置 */}
        <div className="p-6 bg-gray-50 rounded-lg">
          <h2 className="text-xl font-bold mb-4 text-dark">{t('app.sound_settings')}</h2>
          
          {/* 声音开关 */}
          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 mb-4">
            <label className="text-gray-700 font-medium w-full sm:w-24">{t('app.sound')}:</label>
            <div className="flex items-center gap-2">
              <span className={`text-sm ${soundStore.isSoundEnabled ? 'text-green-600' : 'text-gray-500'}`}>
                {soundStore.isSoundEnabled ? t('app.enabled') : t('app.disabled')}
              </span>
              <label className="relative inline-flex items-center cursor-pointer">
                <input
                  type="checkbox"
                  checked={soundStore.isSoundEnabled}
                  onChange={toggleSound}
                  className="sr-only peer"
                />
                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary/30 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
              </label>
            </div>
          </div>

          {/* 音量控制 */}
          {soundStore.isSoundEnabled && (
            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3">
              <label className="text-gray-700 font-medium w-full sm:w-24">{t('app.volume')}:</label>
              <input
                type="range"
                min="0"
                max="100"
                value={soundStore.volume}
                onChange={handleVolumeChange}
                className="flex-1 h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer"
                style={{ backgroundColor: soundStore.volume > 0 ? '#f9fafb' : '#6b7280' }}
              />
              <span className="text-gray-700 font-medium min-w-[40px] text-center">
                {soundStore.volume}%
              </span>
            </div>
          )}
        </div>

        {/* 关于信息 */}
        <div className="p-6 bg-gray-50 rounded-lg text-center">
          <h2 className="text-xl font-bold mb-2 text-dark">{t('app.about')}</h2>
          <p className="text-gray-600 mb-2">{t('app.app_name')}</p>
          <p className="text-gray-500 text-sm">{t('app.version')}: 1.0.0</p>
        </div>
      </div>
    </div>
  );
};

export default SettingsPage;